<template>
    <div id="device_list">


        <div style="margin-top: 20px;margin-bottom: 20px;text-align: right;">
            <el-button type="primary" @click="scan_device()">添加设备</el-button>
            <el-dropdown @command="handleCommand">
                <el-button type="primary" :disabled="(multipleSelection.length>0?false:'disabled')">
                    批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item command='基本设置'>基本设置</el-dropdown-item> -->
                    <el-dropdown-item command='关机'>关机</el-dropdown-item>
                    <el-dropdown-item command='开机'>开机</el-dropdown-item>
                    <el-dropdown-item command='设定温度'>设定温度</el-dropdown-item>
                    <el-dropdown-item command='制冷'>制冷</el-dropdown-item>
                    <el-dropdown-item command='制热'>制热</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" :disabled="(multipleSelection.length>0?false:'disabled')" @click="menu_action('批量删除')">批量删除</el-button>
            <el-button type="primary" @click="reload_data()">刷新</el-button>
        </div>
        <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" header-cell-class-name="header-row" max-height="800" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="设备编号" width="60">
                <template slot-scope="scope">{{ render_item('device_id', scope.row.device_id)}}</template>
            </el-table-column>
            <el-table-column label="状态" width="80">
                <template slot-scope="scope">{{ render_item('is_online', scope.row.is_online)}}</template>
            </el-table-column>
            <el-table-column label="电源" width="50">
                <template slot-scope="scope">
                    <el-button @click="row_item_click('is_power',scope.row)" type="text" size="small">{{ render_item('is_power', scope.row.is_power)}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="设定温度" width="80">
                <template slot-scope="scope">
                    <el-button @click="row_item_click('setting_temperature',scope.row)" type="text" size="small">{{ render_item('setting_temperature', scope.row.setting_temperature)}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="测量温度" width="80">
                <template slot-scope="scope">{{ render_item('measuring_temperature', scope.row.measuring_temperature)}}</template>
            </el-table-column>
            <el-table-column label="工作模式" width="60">
                <template slot-scope="scope">
                    <el-button @click="row_item_click('work_mode',scope.row)" type="text" size="small">{{ render_item('work_mode', scope.row.work_mode)}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="功率" width="60">
                <template slot-scope="scope">{{ render_item('e_power', scope.row.e_power)}}</template>
            </el-table-column>
            <el-table-column label="风速模式" width="60">
                <template slot-scope="scope">
                    <el-button @click="row_item_click('wind_mode',scope.row)" type="text" size="small">{{ render_item('wind_mode', scope.row.wind_mode)}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="风速大小" width="60">
                <template slot-scope="scope">
                    <el-button @click="row_item_click('wind_type', scope.row)" type="text" size="small">{{ render_item('wind_type', scope.row.wind_type)}}</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <!-- 
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    -->
                    <el-button @click="row_btn_click(scope.row,'删除')" type="text" size="small">删除</el-button>
                    <el-button @click="row_btn_click(scope.row,'刷新')" type="text" size="small">刷新2</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹出窗口 -->
        <el-dialog :title="addForm.form_title" :visible.sync="addDialogFormVisible">
            <el-form :inline="true" :model="addForm" class="demo-form-inline">
                <el-form-item label="设备号起" :rules="[
      { type: 'number', message: '必须为数字值'}
    ]">
                    <el-input v-model="addForm.start" placeholder="扫描起始编号"></el-input>
                </el-form-item>
                <el-form-item label="设备号止">
                    <el-input v-model="addForm.end" placeholder="扫描结束编号"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add_device_dialog_submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style>
.el-table .header-row {
    background: #f5f7fa;
}

.el-table .error-row {
    background: #ff6347;
}

.el-table .offline-row {
    background: #eeeeee;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.el-dropdown {
    vertical-align: top;
}

.el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>
<script>
export default {
    data() {
        return {
            tableData: [{
                device_id: 0,
                is_online: 1, //render,凑满3位，前面补0
                work_mode: 0,
                is_sleep: 0,
                setting_temperature: 24,
                is_programming: 0,
                antifree_switch: 0,
                wind_mode: 0,
                measuring_temperature: 0,
                is_power: 0,
                tmp_unit: 0,
                is_lock: 0,
                wind_type: 0
            }],
            multipleSelection: [],
            addForm: {
                form_title: '添加设备',
                start: '',
                end: ''
            },
            addDialogFormVisible: false,
            formLabelWidth: '120px',
        }
    },
    methods: {
         operate_device(ids, k, v) {
            let vm = this
            vm.ajaxPost('/api/operate_device', {
                device_ids: ids,
                operation_code: k,
                operation_value: v
            }, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        vm.msgboxEx('操作成功', 'success')
                        vm.reload_data()
                    } else {
                        vm.msgboxEx('操作失败', 'error')
                    }
                }
            }, function(error) {
                console.log(error);
            })
        },
        handleCommand(command) {
            let vm = this
            let pickedArr = this.multipleSelection
            if (pickedArr.length == 0) {
                vm.msgboxEx('当前没有选中的设备', 'error')
                return
            }
            let device_ids = ''
            for (let item of vm.multipleSelection) {
                if (device_ids == '') {
                    device_ids = device_ids + item.d_number
                } else {
                    device_ids = device_ids + ',' + item.d_number
                }
            }
            if (command == '基本设置') {
                console.log(device_ids)
                vm.$router.push({ path: '/setting_option', params: { device_ids: device_ids } });
            } else if (command == '开机') {
                vm.operate_device(device_ids, '开机', '');
            } else if (command == '关机') {
                vm.operate_device(device_ids, '关机', '');
            } else if (command == '睡眠开启') {
                vm.operate_device(device_ids, '睡眠开启', '');
            } else if (command == '睡眠关闭') {
                vm.operate_device(device_ids, '睡眠关闭', '');
            } else if (command == '童锁开启') {
                vm.operate_device(device_ids, '童锁开启', '');
            } else if (command == '童锁关闭') {
                vm.operate_device(device_ids, '童锁关闭', '');
            } else if (command == '制冷') {
                vm.operate_device(device_ids, '模式制冷', '');
            } else if (command == '制热') {
                vm.operate_device(device_ids, '模式制热', '');
            } else if (command == '设定温度') {
                let row = pickedArr[0]
                let setting_temperature = row.setting_temperature
                let vm = this
                vm.$prompt('请输入设定温度', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\d]+?/,
                    inputErrorMessage: '温度格式不正确',
                    inputValue: setting_temperature,
                    inputType: "number"
                }).then(({ value }) => {
                    vm.operate_device(device_ids, "设定温度", value)
                })
            }
        },
        control_click(kName) {
            alert(kName)
        },
        handleClick(row) {
            console.log(row);
        },
        operate_device(ids, k, v) {
            let vm = this
            vm.ajaxPost('/api/operate_device', {
                device_ids: ids,
                operation_code: k,
                operation_value: v
            }, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        vm.msgboxEx('操作成功', 'success')
                        vm.reload_data()
                    } else {
                        vm.msgboxEx('操作失败', 'error')
                    }
                }
            }, function(error) {
                console.log(error);
            })
        },
        row_item_click(kName, row) {
            let vm = this
            if (kName == 'wind_type') {
                //功率

            }
            if (kName == 'wind_mode') {
                let wind_mode = row.wind_mode
                if (wind_mode == 0) { //1制热 0制冷
                    vm.confirm('确定将风速模式调整为手动?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        vm.operate_device(row.device_id, "风速手动", "")
                    }).catch(() => {

                    });
                } else {
                    vm.confirm('确定将风速模式调整为自动?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        vm.operate_device(row.device_id, "风速自动", "")
                    }).catch(() => {

                    });
                }
            }
            if (kName == 'work_mode') {
                let work_mode = row.work_mode
                if (work_mode == 0) { //1制热 0制冷
                    vm.confirm('确定将设备模式设置为制冷?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        vm.operate_device(row.device_id, "模式制冷", "")
                    }).catch(() => {

                    });
                } else {
                    vm.confirm('确定将设备模式设置为制热?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        vm.operate_device(row.device_id, "模式制热", "")
                    }).catch(() => {

                    });
                }
            }
            if (kName == 'setting_temperature') {
                let setting_temperature = row.setting_temperature
                let vm = this
                vm.$prompt('请输入设定温度', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\d]+?/,
                    inputErrorMessage: '温度格式不正确',
                    inputValue: setting_temperature,
                    inputType: "number"
                }).then(({ value }) => {
                    vm.operate_device(row.device_id, "设定温度", value)
                })
            }
            if (kName == 'is_power') {
                if (row.is_power == 1) {
                    vm.confirm('确定关闭设备?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        vm.operate_device(row.device_id, "关机", "")
                    }).catch(() => {

                    });
                } else {
                    vm.confirm('确定开启设备?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        vm.operate_device(row.device_id, "开机", "")
                    }).catch(() => {

                    });
                }
            }
            console.log(kName, row);
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        render_device_id(device_id) {
            return "xxx" + device_id
        },
        render_item(kName, val) {
            if (kName == 'device_id') {
                if (val < 10) {
                    return '00' + val
                } else if (val < 100) {
                    return '0' + val
                }
                return '' + val
            } else if (kName == 'is_online') {
                if (val == 1) {
                    return '在线'
                } else {
                    return '离线'
                }
            } else if (kName == 'is_power') {
                if (val == 1) {
                    return '开'
                } else {
                    return '关'
                }
            } else if (kName == 'setting_temperature') {
                return val + '℃'
            } else if (kName == 'measuring_temperature') {
                return val + '℃'
            } else if (kName == 'work_mode') {
                if (val == 0) {
                    return '制热'
                } else if (val == 1) {
                    return '制冷'
                }
            } else if (kName == 'wind_mode') {
                if (val == 0) {
                    return '自动'
                } else if (val == 1) {
                    return '手动'
                }
            } else if (kName == 'wind_type') { //1 高速 2中速 3低速
                if (val == 1) {
                    return "高速"
                } else if (val == 2) {
                    return "中速"
                } else if (val == 3) {
                    return "低速"
                }
                return "-"
            } else if (kName == 'e_power') {
                if (val == 0) {
                    return "0%"
                } else if (val == 1) {
                    return "10%"
                } else if (val == 2) {
                    return "17%"
                } else if (val == 3) {
                    return "30%"
                } else if (val == 4) {
                    return "60%"
                } else if (val == 5) {
                    return "100%"
                }
                return "0%"
            }
            return val
        },
        tableRowClassName({ row, rowIndex }) {
            if (row.is_online == 0) {
                return 'offline-row';
            }
            return '';
        },
        reload_data() {
            let vm = this
            vm.ajaxPost('/api/device_list', {}, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        let data = response.data.data;
                        vm.tableData = data;

                    } else {
                        vm.msgboxEx('登录失败', 'error')
                    }
                }
            }, function(error) {
                console.log(error);
            })



        },
        scan_device() {
            //弹出窗口，输入起点，终点，点击确定
            this.addForm.form_title = '扫描添加设备'
            this.addDialogFormVisible = true
        },
        add_device_dialog_submit() {
            let vm = this
            let start = vm.addForm.start
            let end = vm.addForm.end
            if (typeof(start) == 'string') {
                vm.addForm.start = Number(start)
            }
            if (typeof(end) == 'string') {
                vm.addForm.end = Number(end)
            }
            if (vm.addForm.start == NaN) {
                vm.addForm.start = 0
            }
            if (vm.addForm.end == NaN) {
                vm.addForm.end = vm.addForm.start
            }
            if (vm.addForm.start < 0 || vm.addForm.start > 255) {
                vm.msgboxEx('扫描范围1～255', 'error')
                return
            }
            if (vm.addForm.end < 0 || vm.addForm.end > 255) {
                vm.msgboxEx('扫描范围1～255', 'error')
                return
            }
            if (vm.addForm.end < vm.addForm.start) {
                let max = vm.addForm.start
                vm.addForm.start = vm.addForm.end
                vm.addForm.end = max
            }
            //确定扫描范围内设备？
            vm.confirm('确定扫描范围' + vm.addForm.start + '~' + vm.addForm.end + '编号的设备?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                vm.ajaxPost('/api/scan_device', {
                    from: vm.addForm.start,
                    to: vm.addForm.end
                }, function(response) {
                    if (response.status == 200) {
                        if (response.data.code == 1) {
                            vm.reload_data()
                        } else {
                            vm.msgboxEx('扫描失败', 'error')
                        }
                    }
                }, function(error) {
                    console.log(error);
                })

            }).catch(() => {

            });
        },
        menu_action(kName) {
            let vm = this
            if (kName == '批量删除') {
                let len = vm.multipleSelection.length
                if (len > 0) {
                    vm.confirm('确定删除选中的' + len + '条数据?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let ids = ''
                        for (let item of vm.multipleSelection) {
                            if (ids == '') {
                                ids = ids + item.id
                            } else {
                                ids = ids + ',' + item.id
                            }
                        }
                        vm.ajaxPost('/api/delete_device', {
                            ids: ids,
                        }, function(response) {
                            if (response.status == 200) {
                                if (response.data.code == 1) {
                                    vm.msgboxEx('删除成功', 'success')
                                    vm.reload_data()
                                } else {
                                    vm.msgboxEx('删除失败', 'error')
                                }
                            }
                        }, function(error) {
                            console.log(error);
                        })
                    }).catch(() => {

                    });
                }
            }
        },
        row_btn_click(row, kName) {
            let vm = this
            alert(kName)
            if (kName == '编辑') {

            } else if (kName == '删除') {
                vm.confirm('确定删除该设备?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.ajaxPost('/api/delete_device', {
                        id: row.id,
                    }, function(response) {
                        if (response.status == 200) {
                            if (response.data.code == 1) {
                                vm.msgboxEx('删除成功', 'success')
                                vm.reload_data()
                            } else {
                                vm.msgboxEx('删除失败', 'error')
                            }
                        }
                    }, function(error) {
                        console.log(error);
                    })
                }).catch(() => {

                });
            } else if (kName == '刷新') {
                let vm = this
                vm.ajaxPost('/api/device_refresh', {
                    device_ids: row.device_id
                }, function(response) {
                    if (response.status == 200) {
                        if (response.data.code == 1) {
                            vm.msgboxEx('操作成功', 'success')
                            vm.reload_data()
                        } else {
                            vm.msgboxEx('操作失败', 'error')
                        }
                    }
                }, function(error) {
                    console.log(error);
                })
            }
        }
    },
    computed: {


    },
    mounted: function() {
        this.reload_data()
    }
}
</script>
